<extend name="Public/base"/>
<block name="body">
	<link rel="stylesheet" href="/static/backend/css/report.css">

	<script src="__BACKEND_STATIC__/plugins/echarts/echarts.js"></script>
	<div class="page-crumb">
		<div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">数据报表</span></div>

	</div>
	<div class="ui-nav-tab">
		<a class="nav-item state-active" href="/DataReport/profit" data-pjax>收入趋势</a>
		<a class="nav-item state-active" href="/DataReport/profit" data-pjax>24小时趋势</a>
	</div>
	<div class="layui-main">
		<div class="layui-form-item">
			<div class="layui-input-inline">
				<select name="deliveryid" lay-verify="deliveryid" lay-filter="deliveryid" >
					<option value="">全部应用：</option>
					<foreach name="delivery" item="ret" key="k">
						<option value="{$ret.id}">{$ret.delivery_name}</option>
					</foreach>
				</select>
			</div>
			<div class="layui-input-inline">
				<select name="deliveryid" lay-verify="deliveryid" lay-filter="deliveryid">
					<option value="">全部广告位类型：</option>
					<option value="">640*100横幅</option>
					<option value="">640*200横幅</option>
					<option value="">插屏</option>
					<option value="">开屏</option>
					<option value="">分享墙</option>
					<option value="">信息流</option>
				</select>
			</div>
			<div class="layui-inline">
				<input class="layui-input" name="begin" placeholder="请选择开始时间"  value="{$data.begin}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
			</div>至
			<div class="layui-inline">
				<input class="layui-input" name="end" placeholder="请选择结束时间" value="{$data.end}"  onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
			</div>
			<button class="layui-btn layui-btn-min" lay-submit="" lay-filter="submit" id="trend_map">　　确定　　</button>
		</div>

	</div>

	<div id="main" style="width: 1673px;height:300px;">

	</div>
	<div class="layui-main">
	<div class="layui-form-item">
		<div class="layui-input-inline">
			<select name="deliveryid" lay-verify="deliveryid" lay-filter="deliveryid" >
				<option value="">全部应用：</option>
				<foreach name="delivery" item="ret" key="k">
					<option value="{$ret.id}">{$ret.delivery_name}</option>
				</foreach>
			</select>
		</div>
		<div class="layui-input-inline">
			<select name="deliveryid" lay-verify="deliveryid" lay-filter="deliveryid" >
				<option value="">全部广告位类型：</option>
					<option value="">640*100横幅</option>
					<option value="">640*200横幅</option>
					<option value="">插屏</option>
					<option value="">开屏</option>
					<option value="">分享墙</option>
					<option value="">信息流</option>
			</select>
		</div>

		<div class="layui-inline">
			<input class="layui-input"    name="begin_time" placeholder="请选择开始时间"  value="{$data.begin}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
		</div>至
		<div class="layui-inline">
			<input class="layui-input"   name="end_time" placeholder="请选择结束时间" value="{$data.end}"  onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
		</div>
		<button class="layui-btn layui-btn-min" lay-submit="" lay-filter="submit" id="time_data">　　确定　　</button>
	</div>
	</div>
	<table class="layui-table list-content-table" lay-skin="nob">
		<colgroup>
			<col width="50">
			<col width="200">
			<col width="150">
			<col width="200">
			<col width="200">
			<col width="200">
			<col width="200">
			<col width="150">

		</colgroup>
		<thead class="list-table-head">
		<tr>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text ui-table-hcell-text-first">

				</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">日期</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">应用名称</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告位名称</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告位类型</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告位ID</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">状态</div>
			</th>
			<th class="ui-table-hcell">
				<div class="ui-table-hcell-text">广告位总收入</div>
			</th>

		</tr>
		</thead>

		<tbody class="list-table-body" id="each">
		<foreach name="data" item="value">
			<tr>
				<td class="ui-table-cell">
					<div class="ui-table-cell-text">
						<input type="checkbox" class="ui-table-multi-select" data-id="{$value.id}">
					</div>
				</td>
				<td class="ui-table-cell"><div class="ui-table-cell-text">{$value.date_time}</div></td>
				<td class="ui-table-cell"><div class="ui-table-cell-text">{$value.apply_name}</div></td>
				<td class="ui-table-cell"><div class="ui-table-cell-text">{$value.code_name}</div></td>
				<td class="ui-table-cell">
					<div class="ui-table-cell-text">
						<if condition="$value.type eq 1">
							<span class="table-status-activated">640*100横幅</span>
							<elseif condition="$value.code_type eq 2"/>
							<span class="table-status-inactive">640*200横幅</span>
							<elseif condition="$value.code_type eq 3"/>
							<span class="table-status-inactive">插屏</span>
							<elseif condition="$value.code_type eq 4"/>
							<span class="table-status-inactive">开屏</span>
							<elseif condition="$value.code_type eq 5"/>
							<span class="table-status-inactive">分享墙</span>
							<elseif condition="$value.code_type eq 6"/>
							<span class="table-status-inactive">信息流</span>
						</if>
					</div>
				</td>
				<td class="ui-table-cell"><div class="ui-table-cell-text">{$value.id}</div></td>
				<td class="ui-table-cell">
					<div class="ui-table-cell-text">
						<if condition="$value.status eq 1">
							<span class="table-status-activated">待审核</span>
							<elseif condition="$value.status eq 2"/>
							<span class="table-status-inactive">待上传</span>
							<elseif condition="$value.status eq 3"/>
							<span class="table-status-inactive">审核拒绝</span>
							<elseif condition="$value.status eq 4"/>
							<span class="table-status-inactive">生效中</span>
							<elseif condition="$value.status eq 5"/>
							<span class="table-status-inactive">暂停中</span>
						</if>
					</div>
				</td>

			</tr>
		</foreach>
		</tbody>
	</table>

	<script>
        $(document).ready(function(){

            $.ajax({
                type:"get",
                url:'/DataReport/time_data',
                dataType:"json",
                success: function(data){

                    if(data.status == '1') {
                        var str = '';
                        $.each(data.data,function(index,item){
                            str += "<tr><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.date_time + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.apply_name + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+item.code_name+"</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+  item.code_type+"</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.code_id + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.status + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.sum + "</div></td></tr>";

                        });
                        $('#each').append(str);
                    } else {
                        console.log('没接收到返回数据');
                    }
                    return false;
                }
            });
        });
        $(document).ready(function(){
            $.ajax({
                type:"get",
                url:'/DataReport/trend_map',
                dataType:"json",
                success: function(data){

                    if(data.status == '1') {
                        showEchart(data.data);
                    } else {
                        console.log('没接收到返回数据');
                    }
                    return false;
                }
            });
        });

        $("#trend_map").click(function () {
            var begin =$(" input[ name='begin' ] ").val();
            var  end  =$(" input[ name='end' ] ").val();
            //var  delivery_id =$("#delivery_select").val();
            //console.log(delivery_id);
            $.ajax({
                type:"get",
                url:'/DataReport/trend_map',
                dataType:"json",
                data:{'begin':begin,'end':end},
                success: function(data){

                    if(data.status == '1') {
                        showEchart(data.data);
                    } else {
                        console.log('没接收到返回数据');
                    }
                    return false;
                }
            });
        });

        $("#time_data").click(function () {
            var begin =$(" input[ name='begin_time' ] ").val();
            var  end  =$(" input[ name='end_time' ] ").val();
            //var  delivery_id =$("#delivery_select").val();
			//console.log(delivery_id);
            $.ajax({
                type:"get",
                url:'/DataReport/time_data',
                dataType:"json",
                data:{'begin':begin,'end':end},
                success: function(data){

                    if(data.status == '1') {
                        var str = '';
						$.each(data.data,function(index,item){

							str += "<tr><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
							str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.date_time + "</div></td>";
							str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.apply_name + "</div></td>";
							str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+item.code_name+"</div></td>";
							str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+  item.code_type+"</div></td>";
							str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.code_id + "</div></td>";
							str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.status + "</div></td>";
							str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.sum + "</div></td></tr>";

						});


                        $('#each').empty();
                        $('#each').append(str);


                    } else {
                        console.log('没接收到返回数据');
                    }
                    return false;
                }
            });
        });

        function showEchart(data) {


            var myChart = echarts.init(document.getElementById('main'));

            option = {

                tooltip : {

                    trigger: 'axis'
                },

                legend: {

                    data:['收入(单位：元)']


                },

                toolbox: {

                    show : true,

                    feature : {

                        mark : {show: true},

                        dataView : {show: true, readOnly: false},

                        magicType : {show: true, type: ['line']},

                        restore : {show: true},

                        saveAsImage : {show: true}

                    }

                },

                calculable : true,

                xAxis : [

                    {

                        type : 'category',

                        boundaryGap : false,

                        data:data.date_time

                    }

                ],

                yAxis : [

                    {

                        type : 'value',
                        splitLine:{
                            show:false
                        }

                    }

                ],

                series : [

                    {

                        name:'收入(单位：元)',

                        type:'line',

                        smooth:true,

                        itemStyle: {
                            normal: {
                                color: '#40E0D0',
                                borderColor: 'rgba(64,224,208,0.27)',
                                borderWidth: 12

                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(64,224,208, 0.3)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(64,224,208, 0.3)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },

                        data:data.sum

                    }

                ]

            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
	</script>
</block>
